<template>
	<view class="unio2o-toutiao-detail">
		<view class="pd30 bg-w flex space alcenter">
			<view class="flex alcenter">
				<image class="store-logo" :src="detailInfo.store.logo"></image>
				<view class="pl50">
					<view class="ft16 text-main">{{detailInfo.store.name}}</view>
					<view class="mt20 ft14 text-notice">
						<text>{{detailInfo.date}}</text>
						<text class="ml10 mr10">/</text>
						<text>{{detailInfo.views}}浏览</text>
					</view>
				</view>
			</view>
			<view class="btn-gz flex center alcenter ft14 text-theme" v-if="detailInfo.store.isCollected">
				<text class="iconfont iconbtn_concern ft14"></text>
				<text class="ml10">关注</text>
			</view>
			<view class="btn-qxgz flex center alcenter ft14 text-info" v-else>取消关注</view>
		</view>

		<view class="mt20 bg-w pd30">
			<view>
				<!-- <text class="tag-top mr10">{{detailInfo.type}}</text> -->
				<text class="ft20 ftw600 text-main">{{detailInfo.title}}</text>
			</view>
			<view class="mt40">
				<image class="toutiao-img" mode="widthFix" :src="detailInfo.cover"></image>
			</view>

			<view class="unio2o-toutiao-detail-title mt40 flex alcenter">
				<view class="bg-main"></view>
				<view class="ft18 ftw600 text-main ml20">{{detailInfo.type}}</view>
			</view>

			<view class="mt40 ft16 text-main content">
				<rich-text :nodes="detailInfo.content"></rich-text>
			</view>

			<view class="mt40" v-for="(item, index) in ads" :key="index">
				<unio2o-tuan-ad :ad-data="item"></unio2o-tuan-ad>
			</view>
			<view class="mt40" v-for="(citem, cindex) in couponList" :key="cindex">
				<unio2o-coupon-item :coupon="citem"></unio2o-coupon-item>
			</view>

			<view class="mt40">
				<view class="unio2o-toutiao-detail-link bg-default bdr16 plr30 flex space alcenter">
					<view class="flex alcenter">
						<view class="iconfont iconbtn_last scale6 text-theme"></view>
						<view class="text-main ft14 ftw600">上一篇</view>
					</view>
					<view class="flex alcenter">

						<view class="text-main ft14 ftw600">下一篇</view>
						<view class="iconfont iconbtn_more scale6 text-theme"></view>
					</view>
				</view>
			</view>
		</view>

		<view class="mt20 pd30 bg-w">
			<view class="ft14 text-notice">2条评论</view>
			<view class="flex mt40" v-for="(citem, cindex) in comments" :key="cindex">
				<view class="comment-face">
					<image :src="citem.userAvatar"></image>
				</view>
				<view class="comment-content pl30">
					<view class="ft14 text-info">{{citem.userName}}</view>
					<view class="ft12 text-notice mt10">{{citem.date}}</view>
					<view class="mt30 ft16 text-main">
						{{citem.content}}
					</view>
				</view>
			</view>
		</view>

		<view class="unio2o-toutiao-detail-footer-h"></view>
		<view class="unio2o-toutiao-detail-footer bg-w box-shadow-top">
			<view class="main flex space alcenter">

				<view class="col3 text-center">
					<!-- <text class="iconfont iconbtn_zan text-default ft24"></text> -->
					<text class="iconfont iconbtn_zan1 text-theme ft24"></text>
					<text class="num ft12 text-info">{{detailInfo.likes}}</text>
				</view>
				<view class="col3 text-center">
					<text class="iconfont iconbtn_comment text-default ft24"></text>
					<text class="num ft12 text-info">{{detailInfo.comments}}</text>
				</view>
				<view @click="commentAct" class="col3 text-center">
					<view class="iconfont iconbtn_share text-default ft24"></view>
				</view>
			</view>
		</view>


		<unio2o-comment :show="commentAlert" @compile="commentCompile"></unio2o-comment>
	</view>
</template>

<script>
	import unio2oTuanAd from '@/components/module/tuan/ad.vue';
	import unio2oCouponItem from '@/components/module/coupon/item.vue';
	import unio2oComment from './components/comment.vue';
	// 导入API模块
	import api from '@/api';
	const {
		getDetail,
		getComments,
		getAds,
		getCoupons,
		like,
		comment,
		share
	} = api.toutiao;
	export default {
		components: {
			unio2oTuanAd,
			unio2oCouponItem,
			unio2oComment
		},
		data() {
			return {
				commentAlert: false,
				detailInfo: {},
				ads: [],
				couponList: [],
				comments: [],
				isLoading: true
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getInfo()
			this.getAd()
			this.getCoupons()
			this.getComments()
		},
		methods: {
			// 获取详情信息
			async getInfo() {
				try {
					const res = await getToutiaoDetail(this.id || '1005');
					if (res.code === 0) {
						this.detailInfo = res.data;
					} else {
						// 使用默认数据作为降级方案
						this._setDefaultDetailInfo();
					}
				} catch (error) {
					console.error('获取详情信息失败', error);
					// 使用默认数据作为降级方案
					this._setDefaultDetailInfo();
				} finally {
					this.isLoading = false;
				}
			},

			// 设置默认详情信息
			_setDefaultDetailInfo() {
				this.detailInfo = {
					id: 1005,
					title: "旅行安全提示：雨季出行注意事项",
					cover: "https://picsum.photos/600/300?travel=17",
					type: "安全提示",
					date: "2025-06-10",
					author: "客服部",
					content: `
        <p>进入雨季，为保障您的旅行安全和顺利，CNT旅行社特别提醒您注意以下事项：</p>
        <p><strong>一、出行前准备</strong></p>
        <ul>
          <li>关注目的地天气预报，随身携带雨具和防水衣物</li>
          <li>检查证件和贵重物品的防水保护措施</li>
          <li>准备常用药品，预防感冒、肠胃不适等问题</li>
        </ul>
        <p><strong>二、行程中注意</strong></p>
        <ul>
          <li>避免前往山区、河谷等易发生山洪、滑坡的危险区域</li>
          <li>乘坐正规交通工具，避免乘坐超载或无运营资质的车辆</li>
          <li>涉水行走时注意观察路况，避开深水区域和漩涡</li>
          <li>如遇恶劣天气，及时寻找安全场所躲避</li>
        </ul>
        <p><strong>三、应急联系方式</strong></p>
        <ul>
          <li>CNT旅行社24小时客服热线：400-888-8888</li>
          <li>目的地紧急救援电话：110（国内）、当地旅游局热线</li>
        </ul>
        <p>旅行途中请保持通讯畅通，随时关注当地天气和安全信息。祝您旅途愉快！</p>
      `,
					tags: ["旅行安全", "雨季", "出行提示"],
					views: 765,
					likes: 52,
					shares: 23,
					comments: 0,
					store: {
						id: 1,
						logo: 'https://picsum.photos/100/100?random=1',
						name: '卡夫卡少儿艺术培训中心',
						distance: '1.2km',
						isCollected: false
					}
				};
			},

			// 获取评论列表
			async getComments() {
				try {
					const res = await getToutiaoComments(this.id || '1005');
					if (res.code === 0) {
						this.comments = res.data;
					} else {
						// 使用默认数据作为降级方案
						this._setDefaultComments();
					}
				} catch (error) {
					console.error('获取评论列表失败', error);
					// 使用默认数据作为降级方案
					this._setDefaultComments();
				}
			},

			// 设置默认评论数据
			_setDefaultComments() {
				this.comments = [{
						id: "CM20250601",
						parentId: "",
						userAvatar: "https://picsum.photos/100/100?user=1",
						userName: "李**",
						rating: 5,
						content: "非常满意这次黄山之旅，导游专业负责，行程安排合理，酒店干净舒适，性价比很高，下次还会选择这家旅行社。",
						images: [
							"https://picsum.photos/200/200?travel=10",
							"https://picsum.photos/200/200?travel=11"
						],
						tags: ["服务周到", "行程合理", "风景优美"],
						date: "2025-05-20",
						replies: []
					},
					{
						id: "CM20250602",
						parentId: "",
						userAvatar: "https://picsum.photos/100/100?user=2",
						userName: "王**",
						rating: 4,
						content: "杭州西湖两日游体验不错，导游讲解很详细，酒店位置很好，离西湖很近，唯一不足的是第一天行程有点赶。",
						images: [],
						tags: ["导游专业", "位置优越", "行程紧凑"],
						date: "2025-05-15",
						replies: []
					}
				];
			},

			// 获取广告信息
			async getAd() {
				try {
					const res = await getToutiaoAds();
					if (res.code === 0) {
						this.ads = res.data;
					} else {
						// 使用默认数据作为降级方案
						this._setDefaultAds();
					}
				} catch (error) {
					console.error('获取广告信息失败', error);
					// 使用默认数据作为降级方案
					this._setDefaultAds();
				}
			},

			// 设置默认广告数据
			_setDefaultAds() {
				this.ads = [{
					type: 'multi',
					title: '卡夫卡少儿艺术培训中心特惠课程',
					currentPrice: 199,
					originalPrice: 899,
					discount: '2.2折',
					distance: '2.5km',
					isAd: true,
					images: [
						'https://picsum.photos/300/300?random=2',
						'https://picsum.photos/300/300?random=3',
						'https://picsum.photos/300/300?random=4'
					]
				}, {
					type: 'single',
					title: '卡夫卡少儿艺术培训中心特惠课程',
					currentPrice: 199,
					originalPrice: 899,
					discount: '2.2折',
					distance: '2.5km',
					isAd: true,
					images: [
						'https://picsum.photos/300/300?random=2',
						'https://picsum.photos/300/300?random=3',
						'https://picsum.photos/300/300?random=4'
					]
				}];
			},

			// 获取优惠券列表
			async getCoupons() {
				try {
					const res = await getToutiaoCoupons();
					if (res.code === 0) {
						this.couponList = res.data;
					} else {
						// 使用默认数据作为降级方案
						this._setDefaultCoupons();
					}
				} catch (error) {
					console.error('获取优惠券列表失败', error);
					// 使用默认数据作为降级方案
					this._setDefaultCoupons();
				}
			},

			// 设置默认优惠券数据
			_setDefaultCoupons() {
				this.couponList = [{
						id: "C20250601",
						name: "满减券",
						type: 1,
						price: 0,
						amount: 10,
						minAmount: 30,
						discountRate: null,
						maxDiscount: null,
						title: "每满80减20元券",
						description: "美食类通用",
						useInstructions: "下单时自动抵扣，不可与其他优惠叠加"
					},
					{
						id: "C20250602",
						name: "折扣券",
						type: 2,
						price: 0,
						amount: null,
						minAmount: 100,
						discountRate: 0.85,
						maxDiscount: 50,
						title: "全场85折券",
						description: "酒店类通用",
						useInstructions: "入住时出示使用，不包含早餐"
					}
				];
			},
			commentAct() {
				this.commentAlert = true;
			},
			commentCompile() {
				this.commentAlert = false;
			}
		}
	}
</script>

<style>
	.unio2o-toutiao-detail .store-logo {
		width: 120rpx;
		height: 120rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 60rpx;
	}

	.unio2o-toutiao-detail .toutiao-img {
		width: 100%;
	}

	.unio2o-toutiao-detail-title .bg-main {
		width: 8rpx;
		height: 40rpx;
	}

	.unio2o-toutiao-detail-title .content {
		line-height: 44rpx;
	}

	.unio2o-toutiao-detail-link {
		width: 100%;
		height: 100rpx;
	}

	.comment-face {
		width: 76rpx;
	}

	.comment-face image {
		width: 76rpx;
		height: 76rpx;
		border-radius: 38rpx;
	}

	.comment-content {
		width: calc(100% - 76rpx);
	}

	.unio2o-toutiao-detail-footer-h {
		height: calc(120rpx + env(safe-area-inset-bottom));
	}

	.unio2o-toutiao-detail-footer {
		height: calc(120rpx + env(safe-area-inset-bottom));
		width: 100%;
		position: fixed;
		z-index: 10;
		left: 0;
		bottom: 0;
	}

	.unio2o-toutiao-detail-footer .main {
		height: 120rpx;
	}

	.unio2o-toutiao-detail-footer .main .col3 {
		position: relative;
	}

	.unio2o-toutiao-detail-footer .main .num {
		position: absolute;
		left: calc(50% + 26rpx);
		top: -20rpx;
	}
</style>